<template>
	<div>
		<el-form :inline="true">
			<el-form-item label="">
				<el-input v-model="searchMap.order_id" placeholder=""/>
			</el-form-item>
			<el-button type="primary" @click="fetchData()">查询</el-button>
			<el-button type="primary" @click="handleEdit('')">新增</el-button>
		</el-form>

		<!--表格组件-->
		<el-table :data="list" style="width: 100%">
			<!--prop 后端返回的json数据的字段名-->
			<el-table-column prop="order_id" label="">
			</el-table-column>
			<el-table-column prop="hotel_id" label="所属酒店id">
			</el-table-column>
			<el-table-column prop="user_id" label="所属用户id">
			</el-table-column>
			<el-table-column prop="room_id" label="房间id，用于查询订单的房间信息">
			</el-table-column>
			<el-table-column prop="com_id" label="评论id，用于查看是否有评论">
			</el-table-column>
			<el-table-column prop="pirce" label="订单价格，下单时的价格，历史记录">
			</el-table-column>
			<el-table-column prop="create_time" label="创建时间，无默认值，需要在初次插入时赋值">
			</el-table-column>
			<el-table-column prop="update_time" label="修改时间">
			</el-table-column>
			<el-table-column prop="status" label="订单状态（0未支付，1正在通知酒店，2交易达成，3取消/退房，4已完成）">
			</el-table-column>
			<el-table-column fixed="right" label="操作" width="100">
				<template slot-scope="scope">
					<el-button @click="handleEdit(scope.row.order_id)" type="text" size="small">修改</el-button>
					<el-button @click="handleDelete(scope.row.order_id)" type="text" size="small">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!--分页-->
		<el-pagination @size-change="sizeData" @current-change="pageData" :page-sizes="[5, 10, 20, 30, 100]" :page-size="10"
			layout="total, sizes, prev, pager, next, jumper" :total="count">
		</el-pagination>
		<el-dialog title="编辑" :visible.sync="dialogFormVisible">
			<el-form label-width="80px">
				<el-form-item label="所属酒店id">
					<el-input v-model="pojo.hotel_id" />
				</el-form-item>
				<el-form-item label="所属用户id">
					<el-input v-model="pojo.user_id" />
				</el-form-item>
				<el-form-item label="房间id，用于查询订单的房间信息">
					<el-input v-model="pojo.room_id" />
				</el-form-item>
				<el-form-item label="评论id，用于查看是否有评论">
					<el-input v-model="pojo.com_id" />
				</el-form-item>
				<el-form-item label="订单价格，下单时的价格，历史记录">
					<el-input v-model="pojo.pirce" />
				</el-form-item>
				<el-form-item label="创建时间，无默认值，需要在初次插入时赋值">
					<el-input v-model="pojo.create_time" />
				</el-form-item>
				<el-form-item label="修改时间">
					<el-input v-model="pojo.update_time" />
				</el-form-item>
				<el-form-item label="订单状态（0未支付，1正在通知酒店，2交易达成，3取消/退房，4已完成）">
					<el-input v-model="pojo.status" />
				</el-form-item>
				<el-button type="primary" @click="handleSave()">保存</el-button>
				<el-button @click="dialogFormVisible = false">关闭</el-button>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
import OrdersApi from "@/api/apiLiu/Orders_request"
export default {
	data() {
		return {
			list: [],
			searchMap: {
				order_id: null,
				hotel_id: null,
				user_id: null,
				room_id: null,
				com_id: null,
				pirce: null,
				create_time: null,
				update_time: null,
				status: null,
				pageNum: 1,
				pageSize: 7,
			},
			count: 20,
			pojo: {
				order_id: null,
				hotel_id: null,
				user_id: null,
				room_id: null,
				com_id: null,
				pirce: null,
				create_time: null,
				update_time: null,
				status: null,

			},
			dialogFormVisible: false,
			dialogFormVisibleTwo: false,
			id: '',
		}
	},
	created() {
		//在创建vue实例后触发初始化钩子函数
		this.fetchData();
	},
	methods: {
	fetchData() {
		//编写一个方法请求后端的接口，把返回的数据赋值list
		OrdersApi.selectList(this.searchMap).then(response => {
			//  //把返回的结果赋值模型
			this.list = response.data.data
			this.count=response.data.count
		})
	},
	//当分页大小产生变化的时候调用该方法
	sizeData(size) {
		this.searchMap.pageSize = size
		this.fetchData()
	},
	pageData(page) {
		this.searchMap.pageNum = page
		this.fetchData()
	},
	//新增和修改使用同一个函数打开弹窗，区别是新增没有id
	handleEdit(id) {
		this.id = id
		//打开弹窗
		this.dialogFormVisible = true
		if (id !== '') {
			//根据id查询数据绑定到模型上面
			OrdersApi.selectByOrder_id(id).then(reponse => {
				this.pojo=reponse.data.data;
			})
		} else {
			this.pojo = {
				order_id: null,
				hotel_id: null,
				user_id: null,
				room_id: null,
				com_id: null,
				pirce: null,
				create_time: null,
				update_time: null,
				status: null,
			} //清空数据
		}
	},
	//新增和修改保存数据的方法
	handleSave() {
		if (this.id === null || this.id === '') {
			OrdersApi.insert(this.pojo).then(reponse => {
				this.$message({
					message: reponse.data.msg,
					type: 'success'
				})
				//重新加载列表数据
				this.fetchData()
				//关闭弹窗
				this.dialogFormVisible = false
			})
		} else {
			OrdersApi.insertOrUpdate(this.pojo).then(reponse => {
				//新增或者修改成功
				this.$message({
					message: reponse.data.msg,
					type: 'success'
				})
				//重新加载列表数据
				this.fetchData()
				//关闭弹窗
				this.dialogFormVisible = false

			})
		}
	},
	handleDelete(id) {
		this.$confirm('您确定要删除吗?', '提示', {
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning'
		}).then(() => {
			OrdersApi.deleteByOrder_id(id).then(reponse => {
				this.$message({
					type: 'success',
					message: '删除成功!'
				});
				this.fetchData()
			})
		}).catch(() => {
			this.$message({
				type: 'info',
				message: '已取消删除'
			});
		});
	}
}
}

</script>
